<template>
  <div v-if="Object.keys(creator).length !== 0" class="shop-info">
    <img :src="creator.avatarUrl" alt="">
    <span>{{creator.nickname}}</span>
  </div>
</template>

<script>
  export default {
    name: 'DetailShopInfo',
    props: {
      creator: {
        type: Object,
        default() {
          return {}
        }
      }
    }
  }
</script>

<style scoped>
  .shop-info {
    display: flex;
    vertical-align: middle;
    padding: 20px 5px;
    border-bottom: 5px solid #eee;
  }

  .shop-info img {
    width: 50px;
    height: 50px;
    border-radius: 50px;  
  }

  .shop-info span {
    margin: 15px 10px 0;
  }
</style>